<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
		<script src="<%=basePath %>js/jquery-1.3.2.min.js"></script>
		<script src="<%=basePath %>js/Jcrop/js/jquery.Jcrop.min.js"></script>
		<link rel="stylesheet" href="<%=basePath %>js/Jcrop/css/jquery.Jcrop.css" type="text/css" />
		<link rel="stylesheet" href="<%=basePath %>js/Jcrop/demos/demo_files/demos.css" type="text/css" />
		<script language="javascript" type="text/javascript" src="<%=basePath %>/js/preview.js"></script>
		<script language="javascript" type="text/javascript" src="<%=basePath %>/js/ajaxupload.js"></script>
		<script language="javascript" type="text/javascript" src="<%=basePath %>/js/uploadPreview.js"></script>
		<script type="text/javascript" src="http://llt.fantong.com/js/json2.min.js"></script>
	</head>
	<body>
	<div id="outer">

	<div class="jcExample">
    <h1>图片编辑器</h1>
	<div class="article">

        <div class="ud-big-pic">
		    <h2>图片上传</h2>
            <!-- This is the image we're attaching Jcrop to <img src="demo_files/flowers.jpg"  id="cropbox"/>-->
            
            <div id="fileInputprv"></div>
            <!-- This is the form that our event handler fills -->
            <form  method="post" id="subform" name="subform">
                <input type="hidden" id="x" name="x"  value="0" />
                <input type="hidden" id="y" name="y"  value="0"/>
                <input type="hidden" id="w" name="w"  value="0"/>
                <input type="hidden" id="h" name="h"  value="0"/>
                <input type="hidden" id="flag" name="flag"  value="0"/>
                <div class="pic-ct-btn">
                	<input type="button" value="上传裁剪图片" id="submitform"/>
	                <input type="file" name="upload" id="upload"/><br>
	                <input type="text" value="图片名称" id="picName" name="picName"/>
 				</div>
            </form>
        </div>

        <div class="ud-small-pic">
            <p>
                <b>图片预览(120 X 90)</b>
            </p>
            <div style="width:120px;height:90px;overflow:hidden;border:dotted 1px #ccc" id="fileInput2prv"></div>
            <p>
                <b>图片预览(320 X 240)</b>
            </p>
            <div style="width:320px;height:240px;overflow:hidden;border:dotted 1px #ccc" id="fileInput3prv"></div> 
            <!-- 
            <p>
                <b>图片预览(400 X 300)</b>
            </p>
            <div style="width:400px;height:300px;overflow:hidden;border:dotted 1px #ccc" id="fileInput4prv"></div>
             -->
        </div>
        <div class="clear"></div>
        <div id="preview_fake" style="margin-left: 50px">
        <img alt="" src="" id="testimg" style="display:none">
        </div>
	</div>
	</div>
	</div>
	</body>
</html>
<script language="Javascript">
var obj = window.dialogArguments;
var actionurl = "<%=basePath %>pub/addImg2.do";
$(document).ready(function(){
	if(obj != null){
		var objflag = obj.flag;
		var objname = obj.name;
		//alert("objflag== "+objflag);
		//flag 2:LOGO图, 4:banner图, 1：头图, 0:普通图
		if(objflag == '2' || objflag == '4' || objflag == '1' || objname == '1')
			actionurl = "<%=basePath %>pub/addImg.do";
		$("#flag").val(objflag);
		if( objflag == '2'){
			 $("#picName").val("LOGO");
			 $("#picName").attr('readonly',true);
		 }
		 if( objflag == '4'){
			 $("#picName").val("banner");
			 $("#picName").attr('readonly',true);
		 }
	     //alert('您传递的参数为：' + obj.name+"  ===flag== "+objflag);
	     if(objflag == '0' || objflag == '1' || objflag == ''){
	    	 init();
	     }
	}else{
			init();
	}	
});

function init(){
	$("#picName").focus(function(){
		$("#picName").val("");
	});
	
	$("#picName").blur(function(){
		if($("#picName").val() == ""){
			$("#picName").val("图片名称");
		}
	});
}
	
	//设置X,Y轴以及宽高
	function updateCoords(c) {
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};
	
	//检查是否选择了图片
	function checkCoords() {
		if (parseInt($('#w').val()))
			return true;
		alert('您没有选择要切图的区域！');
		return false;
	};

	//预览切图
	$(document).ready(function(){
		var imgwidth="",imgheight="",imgObj='fileInput',imgwidth120="",imgheight120="",imgwidth320="",imgheight320="",imgwidth_1="",imgheight_1="";
		var upload = new AjaxUpload('upload', {
			autoSubmit : false,
			name: 'fileInput',
			responseType: 'json',
			action: actionurl,
			onChange: function(file,ext){
				//取图片宽高
				if(file == "" || file.length==0){
					alert("出现错误，或浏览器不支持，请重新选择文件再试！");
					return false;
				}
					$("#testimg").attr("src",file);
				//将图片赋给临时不可见图片
				setTimeout(function (){
					 var theimage =  new Image();
					     theimage.src =  $("#testimg").attr("src");
					     imgwidth_1 = theimage.width;
					     imgheight_1 = theimage.height;
				    	//alert("imgwidth1== "+imgwidth_1+"imgheight=1= "+imgheight_1);
				    	//图片大于400 X 300 缩放
				    	if(imgwidth_1 >400 && imgheight_1>300){
					    	//如果是4：3的图
						    if((imgwidth_1 / imgheight_1) >= (4 / 3)){
						    	imgwidth = 400;
						    	imgheight = (imgheight_1 * 400) / imgwidth_1;
						    	imgwidth120 = 120;
						    	imgheight120 = (imgheight_1 * 120) / imgwidth_1;
						    	imgwidth320 = 320;
						    	imgheight320 = (imgheight_1 * 320) / imgwidth_1;
						    }else{//如果是竖图
						    	imgwidth = (imgwidth_1 * 300) / imgheight_1;
						    	imgheight = 300;
						    	imgwidth120 = (imgwidth_1 * 120) / imgheight_1;
						    	imgheight120 = 90;
						    	imgwidth320 = (imgwidth_1 * 240) / imgheight_1;
						    	imgheight320 = 240;
						    }
				    	}else{//图片小于400 X 300 不缩放
				    		imgwidth = imgwidth_1;
					    	imgheight = imgheight_1;
					    	imgwidth120 = 120;
					    	imgheight120 = 90;
					    	imgwidth320 = 320;
					    	imgheight320 = 240;
				    	}
				    //alert("imgwidth=1= "+imgwidth+"imgheight=1= "+imgheight+"  file=="+file);
					jQuery.imagePreview({id:imgObj+'prv',upload:imgObj,preObj:imgObj+'prv',imgid:'cropbox',width:imgwidth,height:imgheight,imgpath:file});
					jQuery.imagePreview({id:imgObj+'2prv',upload:imgObj,preObj:imgObj+'2prv',imgid:'preview',width:imgwidth120,height:imgheight120,imgpath:file});
					jQuery.imagePreview({id:imgObj+'3prv',upload:imgObj,preObj:imgObj+'3prv',imgid:'preview2',width:imgwidth320,height:imgheight320,imgpath:file});
				},200);	
					
				//jQuery剪切
				//等100毫秒，让预览图片装入两个预览区域再执行剪切显示
				setTimeout(function(){
					     //alert("imgwidth=2= "+imgwidth+"  imgheight=2= "+imgheight);
					     var jcrop_api = $.Jcrop('#cropbox');
					     jcrop_api.setSelect([ 120, 120, 140, 140 ]);//默认显示框
					     jcrop_api.setOptions({
								minSize: [ 120, 90 ],	//最小宽度高度
								maxSize: [ 1024, 768 ],	//最大宽度高度
								aspectRatio: 4/3,		//宽高比例
								onChange: showPreview,
								onSelect: showPreview
							});
		
							//即时浏览图片
						function showPreview(coords) {
							updateCoords(coords);//将选定的区域的x,y,w,h赋值给隐含变量
							if (parseInt(coords.w) > 0){
								//将预览比例调整为120 X 90
								var rx = 120 / coords.w;
								var ry = 90 / coords.h;
								jQuery('#preview').css({
									width: Math.round(rx * imgwidth) + 'px',
									height: Math.round(ry * imgheight) + 'px',
									marginLeft: '-' + Math.round(rx * coords.x) + 'px',
									marginTop: '-' + Math.round(ry * coords.y) + 'px'
								});
								//将预览比例调整为320 X 240
								rx = 320 / coords.w;
								ry = 240 / coords.h;
								jQuery('#preview2').css({
									width: Math.round(rx * imgwidth) + 'px',
									height: Math.round(ry * imgheight) + 'px',
									marginLeft: '-' + Math.round(rx * coords.x) + 'px',
									marginTop: '-' + Math.round(ry * coords.y) + 'px'
								});
							}
						}
					},500);
			},
	        
			onSubmit : function(file , ext){
				//判断是否选择区域 
				checkCoords();
	            // Allow only images. You should add security check on the server-side.
				if (ext && /^(jpg|png|jpeg|gif)$/.test(ext)){
					/* Setting data */
					var picname = $("#picName").val();
					if(picname == '' || picname.length == 0 || picname == '图片名称'){
						alert("请输入图片名称");
						location = location;
						return false;
					}
					//提交时传值
					this.setData({
						"x":$("#x").val(),
						"y":$("#y").val(),
						"w":$("#w").val(),
						"h":$("#h").val(),
						"picName":picname,
						"flag":$("#flag").val()
					});		
				} else {					
					alert("请选择图片文件!");
					return false;				
				}		
			},
			onComplete : function(file,response){
				try{
					var strData = JSON.stringify(response);	//转成字符串
					var  jsonData = JSON.parse(strData);	//转成JSON对象
					returnValue(jsonData);
				}catch(e){alert(e);}				
			}		
	});
		

	//点击上传按钮
	jQuery('#submitform').click(function(){
        upload.submit();
        
        //upload.enable();
        //this.disabled = true;
        return false;
    });

	//返回传回的值到父页面
	 function returnValue(jsonData){
		window.returnValue = jsonData;
		window.close();
	 }
	 
	});

</script>
